<template>
  <div class="secondary-page-mode">
      <div class="secondary-toolbar">
           <span>日期 : </span>
           <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
           <el-button type="delet"><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <div class="currency-mode-wrap">
            <el-table
              :data="tableData"
              border
              :span-method="objectSpanMethod"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                width="50">
              </el-table-column>
              <el-table-column
                prop="prop1"
                label="仪器厂家">
                  
              </el-table-column>
               <el-table-column
                prop="prop2"
                label="监测设备">
              </el-table-column>
               <el-table-column
                prop="prop3"
                label="故障次数">
              </el-table-column>
               <el-table-column
                prop="prop4"
                label="更换频次">
              </el-table-column>
            </el-table>
      </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      tableData: [
        {
          prop1: "北京雪迪龙科技股份有限公司",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
        },
        {
          prop1: "北京雪迪龙科技股份有限公司",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
        },
        {
          prop1: "北京雪迪龙科技股份有限公司",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
        },
        {
          prop1: "北京雪迪龙科技股份有限公司",
          prop2: '松花江流域',
          prop3: 1,
          prop4: 1,
        },
      ]
    };
  },
  created() {
   this.$store.commit("setShowlefttree", true);
    let arr=[]
    for(let i=0;i<this.tableData.length;i++){
        let num = this.adda(i,'prop1','sf');
        i+=num-1
    }
  },
  methods: {
    adda(inedx,prop,key){
        let name = this.tableData[inedx][prop];
        let row = 0;
        for(let i=inedx;i<this.tableData.length;i++){
          if(name == this.tableData[i][prop]){
            row++
          }else{
            break;
          }
        }
        this.tableData[inedx][key] = row;
        return row
    },
    indexMethod(index) {
      return index + 1;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 1) {
          if(row.sf){
              return{
                  colspan:1,
                  rowspan:row.sf
              }
          }else{
               return{
                  colspan:1,
                  rowspan:0
              }
          }
      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
